<template>
	<view class="center">
		<u-navbar title="账号安全"></u-navbar>
		<view class="content">
			
			<view class="user-item">
				<view class="user-title">编辑手机号</view>
				<view class="user-right">
					<view class="edit"><u-icon name="arrow-right" color="#888888"></u-icon></view>
				</view>
			</view>
			
			<view class="user-item">
				<view class="user-title">实名认证</view>
				<view class="user-right">
					<view class="edit"><u-icon name="arrow-right" color="#888888"></u-icon></view>
				</view>
			</view>
			
			<view class="user-item">
				<view class="user-title">实名认证</view>
				<view class="user-right">
					<view class="edit"><u-icon name="arrow-right" color="#888888"></u-icon></view>
				</view>
			</view>
			
			<view class="user-item">
				<view class="user-title">绑定微信</view>
				<view class="user-right">
					<view class="edit"><u-icon name="arrow-right" color="#888888"></u-icon></view>
				</view>
			</view>
			
			<view class="user-item">
				<view class="user-title">修改密码</view>
				<view class="user-right">
					<view class="edit"><u-icon name="arrow-right" color="#888888"></u-icon></view>
				</view>
			</view>
			
		</view>
	</view>
</template>

<script>
import { mapGetters } from 'vuex';
export default {
	data() {
		return {};
	},

	computed: {
		...mapGetters(['imgBaseUrl'])
	},
	methods: {}
};
</script>
<style lang="scss">
@import '@/styles/mixin.scss';
.center {
	min-height: 100%;
	background-color: #f5f5f5;
	.content {
		margin-top: 40rpx;
		border-radius: 20rpx;
		background: #ffffff;
		.user-item {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: baseline;
			padding: 30rpx;
			border-bottom: 1rpx solid #eeeeee;
			.user-title {
				font-size: 26rpx;
				font-weight: 400;
				color: #222222;
			}
			.user-right {
				display: flex;
			
				.edit {
					padding-left: 20rpx;
				}
			}
		}
	}
}
</style>
